import React from 'react';
import { Icon, Menu, message } from 'antd';
import RenderMaterialItem from '../common/commonRender/renderMaterialItem';
import TitleItem from '../../components/TitleItem';
import UploadModal from '../../components/UploadModal';
import CustomModal from '../../components/UploadModal/CustomModal';
import projectServer from '../../services/project';
import isSuccess from '../../utils/error';

class ProjectMaterial extends React.Component {
  state = {
    needReflesh: 'false', // 新增文件夹成功之后，用于PickerModal内部刷新文件夹列表
    filesItem: {},
    showNewFolder: false,
  };

  renderMenu() {
    const { isLawyer } = this.props;
    return (
      <Menu onClick={({ key }) => this[key]()}>
        <Menu.Item key="showUploadModal">上传文件</Menu.Item>
        {isLawyer && <Menu.Item key="showCustomModal">自定义文件夹</Menu.Item>}
      </Menu>
    );
  }

  showUploadModal = (val) => {
    console.log('-----------------------showUploadModal---------------------------');
    console.log(val);
    const { folder, folderid, clientid, foldertype, foldername, partanme } = val || {};

    this.setState({
      showModal: true,
      filesItem: {
        folder,
        folderid,
        clientid,
        foldertype,
        foldername,
        partanme,
      },
    });
  };
  /**
   *  文件夹列表
   * @param {projectid, projecttype, stageid} params
   */
  getFolderlist = async (params) => {
    const res = await projectServer.getFolderlist(params);
    if (isSuccess(res)) {
      console.log('---UploadModal getFolderlist---', res);
      this.setState({ folderlist: res.data || [] });
    }
  };
  showCustomModal = () => {
    this.setState({ customModal: true });
  };

  openModal = () => {
    if (this.props.create) {
      message.warn('请在保存项目后上传资料');
    }
  };

  onUploadResult = async (allRes, callback) => {
    // 调用组件内部方法刷新
    this.renderMaterialItem.refleshFile(callback);
  };

  // 新建自定义文件夹和修改文件夹可见状态都要触发更新
  refleshFolder = () => {
    this.setState({ needReflesh: Math.random() });
  };

  render() {
    const { detailData, data = {}, create, isShowInSlider, col = 2, projectState, activeStageIndex, chatListCurrentItem } = this.props;
    const { showModal, customModal, needReflesh, filesItem, showNewFolder } = this.state;
    const { inlawyermember } = chatListCurrentItem || {};
    return (
      <div>
        <TitleItem title={'资料'} onClick={this.openModal} />
        <RenderMaterialItem
          ref={(d) => (this.renderMaterialItem = d)}
          col={col}
          isShowInSlider={isShowInSlider}
          activeStageIndex={activeStageIndex}
          refleshFolder={this.refleshFolder}
          create={create}
          files={data.files || []}
          detailData={detailData}
          stage={data}
          projectState={projectState}
          showUploadModal={this.showUploadModal}
        />
        {inlawyermember ? (
          <div style={{ color: '#2797ff', cursor: 'pointer' }} onClick={() => this.setState({ showNewFolder: true })}>
            新建文件夹
          </div>
        ) : null}
        {create ? null : (
          <UploadModal
            stagename={detailData.stages[0]?.name}
            recname={detailData.name}
            folderName={filesItem.foldername}
            type={detailData.projectid ? '1' : '2'}
            needReflesh={needReflesh}
            projectid={detailData.projectid}
            projecttype={detailData.projecttype}
            stageid={data.stageid}
            show={showModal}
            filesItem={filesItem}
            onUploadResult={this.onUploadResult}
            onCancel={() => this.setState({ showModal: false })}
          />
        )}
        {create ? null : (
          <CustomModal
            projectid={detailData.projectid}
            stageid={data.stageid}
            show={customModal}
            onSuccess={this.refleshFolder}
            onCancel={() => this.setState({ customModal: false })}
          />
        )}
        {!!inlawyermember && !!showNewFolder && (
          <CustomModal
            projectid={detailData.projectid}
            stageid={data.stageid}
            show={true}
            onSuccess={() => {
              this.setState({ showNewFolder: false });
              this.refleshFolder();
            }}
            onCancel={() => this.setState({ showNewFolder: false })}
          />
        )}
      </div>
    );
  }
}

export default ProjectMaterial;
